<template>
    <div class="topbar">
        <div class="wrap">
            <div class="l">欢迎来到叩丁狼积分商城</div>
            <div class="r">
                <ul>
                    <li @click="hdClick">
                        <img :src="userInfo.headImg" width="26">
                        用户名：{{userInfo.nickName}}
                    </li>
                    <li>我的积分：{{userInfo.coin}}</li>
                    <li>获取积分</li>
                    <li>叩丁狼官网</li>
                    <li class="login-btn" @click="changeIsShowLoginModal(true)" v-show="!isLogined">登陆</li>
                    <li class="cart-btn" v-show="isLogined" @click="$router.push('/user/cart')">
                        <img src="	http://sc.wolfcode.cn/assets/integralMall/img/index/Shopping.png" />
                        <span>购物车</span>
                        <b>{{cartTotal}}</b>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
  
<script>
import { mapMutations, mapState, mapActions } from 'vuex';
export default {
    name: "TopBar",
    data() {
        return {

        }
    },
    created() {
        let token = localStorage.getItem("x-auth-token");
        if (token) {
            this.asyncUserAction();
        } else {
            this.initUserInfo();
        }
    },
    computed: {
        ...mapState({
            isLogined: state => state.loginStatus.isLogined,
            userInfo: state => state.userInfo.userInfo,
            cartTotal: state => state.userInfo.cartTotal
        })
    },
    methods: {
        ...mapMutations({
            changeIsShowLoginModal: "showLoginModal/changeIsShowLoginModal",
            changeIsLogined: "loginStatus/changeIsLogined",
            initUserInfo: "userInfo/initUserInfo"
        }),
        ...mapActions({
            asyncUserAction: "userInfo/asyncUserAction"
        }),
        hdClick() {
            if (this.isLogined != true) {
                this.$message.warning("请先登录")
            } else {
                this.$message.success("你已经登录")
            }
        }
    },
    watch: {
        "$route.path": {
            handler(newVal, oldVal) {
                let motoken = localStorage.getItem("x-auth-token");
                this.changeIsLogined(Boolean(motoken));
            }
        }
    }
};
</script>
  
<style lang="less" scoped>
@import "../assets/css/global.less";

.topbar {
    background-color: #242b39;
    height: 40px;
    color: white;

    .wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .r ul {
            display: flex;

            li {
                display: flex;
                margin-left: 20px;
                align-items: center;
                cursor: pointer;

                img {
                    border-radius: 50%;
                    margin-right: 6px;
                }

                &.login-btn {
                    width: 124px;
                    height: 40px;
                    background-color: @base-color;
                    justify-content: center;
                }

                &.cart-btn {
                    width: 124px;
                    height: 40px;
                    background-color: @base-color;
                    justify-content: center;

                    b {
                        width: 22px;
                        height: 22px;
                        background: #fd604d;
                        border-radius: 11px;
                        line-height: 22px;
                        text-align: center;
                        margin-left: 5px;
                    }
                }
            }
        }
    }
}
</style>
  